<template>
	<div class="div">
		<div class="div2">
			<div class="btn">
				<img :src="`http://127.0.0.1/api/public/showimg/1`" v-if="img ==undefined" />
				<img :src="`http://127.0.0.1/api/public/showimg/${img}`" v-if="img !=undefined" />
				<router-link to="/pc/home">
					<h5 style="margin-left: 0.5vw;color:#999ba1;">首页-书城</h5>
				</router-link>
				<h5 style="margin-left: 40vw;color:#999ba1;">你好!
					<el-button type="text" @click="dialogFormVisible = true" v-if="uname==''">{{d}}</el-button>
					<router-link to="/pc/myxx">
						<el-button type="text" v-if="uname!=''" style="color: orangered;">{{uname}}</el-button>
					</router-link>
					<el-dialog title="登录" :visible.sync="dialogFormVisible">
						<el-form :model="user">
							<el-form-item label="账号" :label-width="formLabelWidth">
								<el-input v-model="user.username" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="密码" :label-width="formLabelWidth">
								<el-input type="password" v-model="user.password" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="login()">确 定</el-button>
						</div>
					</el-dialog>
				</h5>
			</div>
			<div class="div3">
				<router-link to="/pc/zc">
					<h5>免费注册</h5>
				</router-link>
			</div>
			<div class="div4">
				<router-link to="/pc/gwc">
					<h5>|我的购物车</h5>
				</router-link>
				<router-link to="/pc/dd">
					<h5>|我的订单|</h5>
				</router-link>
			</div>
			<aside>
				<button @click="logout()">退出</button>
			</aside>
			<router-link to="/mobile/home">app端</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PcHeader',
		data() {
			return {
				dialogTableVisible: false,
				dialogFormVisible: false,
				user: {
					username: '',
					password: '',
				},
				formLabelWidth: '120px',
				d: '请登录',
				img: '',
				uname: '',
			}
		},
		methods: {
			login() {
				this.dialogFormVisible = false;
				this.$postk("/api/login", this.user).then((resp) => {
					console.log(resp);
					let token = resp.data.data.token;
					window.localStorage.setItem("token", token);
					console.log(200);
					this.$message({
						message: resp.data.msg,
						type: 'success'
					})
					this.$get("/api/user/info").then((resp) => {
						console.log(resp.data);
						this.img = resp.data.data.img;
						window.localStorage.setItem("img", resp.data.data.img);
						window.localStorage.setItem("token", token);
						window.localStorage.setItem("role", resp.data.data.role);
						window.localStorage.setItem("account", resp.data.data.account);
						this.$store.state.name = resp.data.data.name;
						this.$store.state.role = resp.data.data.role;
						this.$store.state.account = resp.data.data.account;
						this.$store.state.img = resp.data.data.img;
						this.uname = this.$store.state.name;
						if (this.$store.state.role == 'adm') {
							this.$router.push("/adm/img");
						}
					})
				})
				this.user.username = '';
				this.user.password = '';
			},
			logout() {
				localStorage.removeItem('token');
				this.img = undefined;
				this.d = '请登录';
				this.uname = '';
			}
		},
		mounted() {
			this.img = this.$store.state.img;
			console.log(this.img);
		}
	}
</script>

<style scoped>
	.div {
		position: fixed;
		display: flex;
		justify-content: space-between;
		top: 0;
		z-index: 5;
		width: 100%;
		min-width: 1200px;
		height: 40px;
		line-height: 40px;
		font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
		background: linear-gradient(180deg, #d1d1d1, #f4f4f4, #f5f5f5);
	}

	.div .div2 .btn {
		display: flex;
		align-items: center;
	}

	.div .div2 .btn img {
		margin-left: 10px;
	}

	.div .div2 {
		width: 100%;
		display: flex;
		height: 7vh;
		background-color: #eaeaea;
		align-items: center;
	}

	.div .div2 img {
		width: 3.5%;
		border-radius: 50%;
		margin-left: 4rem;
	}

	.div .div2 .div3 {
		display: flex;
		margin-left: 1vw;
		width: 5%;
	}

	.div .div2 .div4 {
		display: flex;
		margin-left: 5vw;
		width: 15%;
	}

	.div .div2 aside {
		margin-right: 50px;
	}

	.div .div2 aside button {
		border: none;
		background-color: #eaeaea;
		color: #a2a5aa
	}
</style>